<template>
  <div class="app-wrapper" style="height: 100%" id="othermanage">
    <div class="header-wrapper">
      <div @click="lineConfigHandle" :class="{ fontColor: resortFlag == 1 }">
        进线配置
      </div>
      <div @click="commonWordsHandle" :class="{ fontColor: resortFlag == 2 }">
        常用语管理
      </div>
      <div @click="summaryManageHandle" :class="{ fontColor: resortFlag == 3 }">
        小结管理
      </div>
      <div @click="videoConfigHandle" :class="{ fontColor: resortFlag == 4 }">
        音视频配置
      </div>
    </div>
    <div class="app-container">
      <div class="containerMain">
        <!-- 进线配置 -->
        <div v-show="resortFlag == 1">
          <div class="header">
            <div class="header-title">
              <section>进线等待消息</section>
            </div>
          </div>
          <div class="container">
            <div class="div-table">
              <el-table
                :header-cell-style="headerStyle"
                :data="list"
                element-loading-text="Loading"
                fit
                border
                :row-style="{height:'150px'}"
                :highlight-current-row="false"
              >
                <el-table-column label="类型" width="200" align="center">
                  <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="预计业务平均办理时长" width="400" align="center">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.id"
                      placeholder="请选择"
                      filterable
                      allow-create
                      size="mini"
                      style="width：20px"
                    >
                      <el-option
                        v-for="item in timeOptions"
                        :key="item.id"
                        :label="item.videoNum"
                        :value="item.id"
                      >
                      </el-option> </el-select
                    >分钟
                  </template>
                </el-table-column>
                <el-table-column label="提示语" header-align="center">
                  <template slot-scope="scope">
                    <div style="margin-bottom:5px">
                      <span>当前排队人数：{{scope.row.id}}人</span>
                      <el-switch
                        style="float:right"
                        :active-value="1"
                        :inactive-value="2"
                        v-model="scope.row.enable"
                        @change="queueHandle(scope.row)"
                      >
                      </el-switch>
                    </div>
                   <div style="margin-bottom:5px">
                      <span>您现在排在第{{scope.row.enable}}位</span>
                      <el-switch
                        style="float:right"
                        :active-value="1"
                        :inactive-value="2"
                        v-model="scope.row.enable"
                        @change="queueHandle(scope.row)"
                      >
                      </el-switch>
                    </div>
                   <div style="margin-bottom:5px">
                      <span>预计需等待{{scope.row.enable}}分钟</span>
                      <el-switch
                        style="float:right"
                        :active-value="1"
                        :inactive-value="2"
                        v-model="scope.row.enable"
                      >
                      </el-switch>
                    </div>
                    <div style="margin-bottom:5px">
                      <span>已等待时长{{scope.row.enable}}时{{scope.row.enable}}分{{scope.row.enable}}秒</span>
                      <el-switch
                        style="float:right"
                        :active-value="1"
                        :inactive-value="2"
                        v-model="scope.row.enable"
                      >
                      </el-switch>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="是否启用" width="243px" align="center">
                  <template slot-scope="scope">
                    <el-switch
                      style="display: block;margin-bottom:5px"
                      :active-value="1"
                      :inactive-value="2"
                      v-model="scope.row.enable"
                    >
                    </el-switch>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 常用语管理 -->
        <div v-show="resortFlag == 2">
          <div class="header">
            <div class="header-search">
              <el-input
                placeholder="搜索关键字"
                v-model="searchform.entNum"
                size="small"
                class="input-with-select"
              ></el-input>
              <span class="el-icon-search" size="small"></span>
            </div>
            <div class="header-button">
              <el-button
                type="primary"
                size="small"
                @click="addSummary"
                class="add-summary"
                >+添加常用语</el-button
              >
            </div>
          </div>
          <div class="container">
            <div class="div-table">
              <el-table
                :header-cell-style="headerStyle"
                :data="list"
                element-loading-text="Loading"
                fit
                size="mini"
                highlight-current-row
              >
                <el-table-column label="快捷语缩写">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="常用语">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="是否生效">
                  <!-- <template slot-scope="scope">
                    <el-switch v-model="value1"> </el-switch>
                  </template> -->
                </el-table-column>
                <el-table-column label="操作" width="243px">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      style="font-size: 15px"
                      @click="() => editBtn(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="small"
                      type="text"
                      style="color: #ac1414; font-size: 15px"
                      @click="() => delFn(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 小结管理 -->
        <div v-show="resortFlag == 3">
          <div class="header">
            <div class="header-button">
              <el-button
                type="primary"
                size="small"
                @click="addSummary"
                class="add-summary"
                >+添加小结</el-button
              >
            </div>
          </div>
          <div class="container">
            <div class="div-table">
              <el-table
                :header-cell-style="headerStyle"
                :data="list"
                element-loading-text="Loading"
                fit
                size="mini"
                highlight-current-row
              >
                <el-table-column label="一级目录">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="内容">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="关联业务">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="技能组">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="操作" width="243px">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      style="font-size: 20px"
                      @click="() => editBtn(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="small"
                      type="text"
                      style="color: #ac1414; font-size: 20px"
                      @click="() => delFn(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 音视频配置-->
        <div v-show="resortFlag == 4">
          <div class="container" style="padding: 50px">
            <div class="div-table">
              <el-table
                :header-cell-style="headerStyle"
                :data="list"
                element-loading-text="Loading"
                fit
                size="mini"
                highlight-current-row
              >
                <el-table-column label="一级目录">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="内容">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="关联业务">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="技能组">
                  <template slot-scope="scope">{{
                    scope.row.videoNum
                  }}</template>
                </el-table-column>
                <el-table-column label="操作" width="300px">
                  <template slot-scope="scope">
                    <el-button type="text" @click="() => viewFn(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      type="text"
                      style="color: red"
                      @click="() => delFn(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pagination :pagination="pagination" />
  </div>
</template>

<script>
import moment from "moment";
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import selectModule from "@/components/common/selectmodulecopy";
import inputModule from "@/components/common/inputmodule";
import { fetchSeatExport, checkSeatExport } from "@/api/systemapi/video"; //搜索  导出
import {
  fetchList,
  fetchDel,
  fetchDisabled,
  downloadUserInfo,
  fetchExport,
} from "@/api/systemapi/videonumber";
import { pageParams } from "@/settings";

export default {
  name: "videonumber",
  components: {
    Pagination,
    HeaderTitle,
    selectModule,
    inputModule,
  },
  data() {
    const TODAYSTART = moment().startOf("day").format("YYYY-MM-DD 00:00:00");
    const TODAYEND = moment().endOf("day").format("YYYY-MM-DD 23:59:59");
    return {
      resortFlag: 1,
      value1: true, //是否生效
      activeName: "second",
      entNum: "",
      titleList: [{ title: "其他管理" }],
      timeValue: [TODAYSTART, TODAYEND],
      tableHeight: "300", //表格默认高度
      list: [],
      listLoading: true,
      searchform: {
        videoNum: "",
        entNum: "",
        rows: "10",
        page: "1",
        startTime: "",
        endTime: "",
      },
      // 分页
      pagination: pageParams,
      dialogVisible: false,
      timeOptions: [
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
      ],
    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function () {
      this.searchform.page = this.pagination.currentPage;
      this.fetchData();
    },
    "pagination.pageSize": function () {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.fetchData();
    },
  },
  mounted() {
    const { entNum } = this.$route.params;
    this.entNum = entNum;
    this.searchform.entNum = entNum;
    this.fetchData();
    // this.$nextTick(() => {
    //   let self = this;
    //   this.tableHeight = this.$refs.block.offsetHeight - 220;
    //   window.onresize = () => {
    //     return (() => {
    //       this.tableHeight = this.$refs.block.offsetHeight - 220;
    //     })();
    //   };
    // });
  },
  methods: {
    lineConfigHandle() {
      this.resortFlag = 1;
    },
    commonWordsHandle() {
      this.resortFlag = 2;
    },
    summaryManageHandle() {
      this.resortFlag = 3;
    },
    videoConfigHandle() {
      this.resortFlag = 4;
    },
    exportDemo(type) {
      downloadUserInfo({ ...this.searchform, exportType: type }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        console.log(res, "res");
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#E2E4E8;color:#666";
      }
    },
    // 重置搜索，刷新列表
    reset() {
      const TODAYSTART = moment().startOf("day").format("YYYY-MM-DD 00:00:00");
      const TODAYEND = moment().endOf("day").format("YYYY-MM-DD 23:59:59");
      (this.timeValue = [TODAYSTART, TODAYEND]),
        (this.searchform = {
          startTime: this.timeValue[0],
          endTime: this.timeValue[1],
          videoNum: "",
          entNum: "",
          rows: "10",
          page: "1",
        }),
        this.fetchData();
    },
    //查询
    fetchData(data) {
      console.log(data, "dddddd"); //1 呼叫统计查询  2 工作情况统计查询 3 满意度统计查询
      console.log(this.timeValue, "this.timeValue");
      if (this.timeValue != null && this.timeValue.length > 0) {
        this.searchform.startTime = moment(this.timeValue[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.searchform.endTime = moment(this.timeValue[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      console.log(this.searchform.startTime, "231232312");
      fetchList({ ...this.searchform }).then((response) => {
        if (response.code == 0) {
          console.log(response, "huahua");
          this.list = response.data.rows;
          this.timeOptions = response.data.rows;
          this.pagination.total = response.data.records;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    // 新增
    addOrUpdate() {
      this.$router.push({ path: "/vpm/customer/detail" });
    },
    viewFn(data) {
      this.$router.push({
        path: "/vpm/customer/detail",
        query: { type: "2", id: data.id },
      });
    },
    handelExport() {
      if (this.$refs.uploadBatch) {
        this.$refs.uploadBatch.clearFiles();
      }
      this.dialogVisible = true;
    },
    // 批量导入文件
    httpRequestExport(param) {
      console.log(param, "param");
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fetchExport(fd).then((res) => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    submitUpload() {
      this.$refs.uploadBatch.submit();
    },
    exportDetail(data) {
      //导出
      console.log(data, "datattadft"); //1 呼叫统计导出   2工作情况统计导出  3 满意度统计导出
      if (this.timeValue != null && this.timeValue.length > 0) {
        this.searchform.startTime = moment(this.timeValue[0]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.searchform.endTime = moment(this.timeValue[1]).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      checkSeatExport({ ...this.searchform }).then((res) => {
        //导出验证
        console.log(res, "daochuyanzhneg");
        if (res.code == 0) {
          fetchSeatExport({ ...this.searchform }).then((res) => {
            console.log(res, "daochudaochu");
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel",
            });
            console.log(res.headers["content-disposition"], "res.headers[");
            let str = res.headers["content-disposition"].split(";")[1];

            // console.log(str,"str1111")
            if (str.indexOf("=") != -1) {
              var filename = decodeURI(str.slice(9));
            } else {
              var filename = decodeURI(str);
            }
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = filename; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    //添加小结
    addSummary() {
      this.$router.push({ path: "/vpm/addsummary/detail" });
    },
    //当前排队人数修改
    queueHandle(row){

    }
  },
};
</script>
<style lang="scss">
.tree-con {
  .el-tree-node__content {
    margin-bottom: 20px;
  }
}
#othermanage .el-input-group__append button.el-button {
  // border: 1px solid red;
  // border-left-color: #FFFFFF;
  background: #ffffff;
}
#othermanage .el-input__inner {
  border-right-color: #ffffff;
  border: none;
}
// #othermanage .el-table td,.el-table th {
// text-align: center !important;
// }
.el-select .el-input__inner {
  width: 100px;
}
</style>
<style lang="scss" scoped>
.header-wrapper {
  height: 52px;
  line-height: 52px;
  padding: 5px 30px;
  font-size: 16px;
  color: #333;
  box-shadow: 1px 0 4px #ccc;
  display: flex;
  .fontColor {
    color: #379dff;
  }
  div {
    width: 150px;
    padding: 0 10px;
    cursor: pointer;
  }
  div:hover {
    color: #379dff;
  }
}
.containerMain {
  width: 100%;
  .search-item {
    padding: 20px 10px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    .item-list {
      display: flex;
      flex-wrap: wrap;
    }
    .item-con {
      display: flex;
      margin-right: 30px;
      span {
        display: inline-block;
        line-height: 28px;
        margin-right: 10px;
      }
    }
    .item {
      width: 180px;
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    .div-tree {
      width: 250px;
    }
    .div-table {
      flex: 1;
      width: 100%;
      overflow: hidden;
      padding: 0 20px;
      .el-table {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.header {
  height: 52px;
  padding-left: 5px;
  font-size: 16px;
  color: #333;
  margin-top: 10px;
  .header-search {
    float: left;
    margin-left: 20px;
    border: 1px solid #e2e4e8;
    position: relative;
    span {
      color: #1980ff;
      position: absolute;
      left: 150px;
      top: 9px;
      cursor: pointer;
    }
  }
  .header-button {
    float: right;
    .add-summary {
      width: 154px;
      height: 39px;
      background-color: #ce9c9c;
      font-size: 20px;
      font-family: Roboto;
      border: none;
    }
  }
  .header-title {
    section {
      width: 154px;
      line-height: 52px;
      color: #ce9c9c;
      font-size: 15px;
    }
  }
}
</style>
